<template>
    <div class="app-container">
        <el-card shadow="never" style="margin-bottom:24px;">
            <el-button
                type="primary"
                size="small"
                @click="
                    () => {
                        this.ruleForm.id = null;
                        handleOpenRuleModal();
                    }
                "
            >
                新增策略
            </el-button>
        </el-card>
        <el-card shadow="never" style="margin-bottom:24px;">
            <span class="rule-title">策略模式</span>
            <span class="rule-danger">每月1月1日进行数据统计，若修改、删除等，需下个月生效</span>
            <el-row>
                <span class="rule-info"
                    >此功能是为了鼓励团长更好进行推广，达到一下条件，在基础佣金基础上进行奖励</span
                >
            </el-row>
        </el-card>
        <div class="rule-cards">
            <el-card class="rule-card" v-for="item in list" :key="item.id" :title="item.name">
                <div slot="header" class="rule-card-header">
                    <el-switch
                        style="vertical-align: top;height: 24px;"
                        @change="handleToggleRule($event, item.id)"
                        :value="item.status === 'ON'"
                    >
                    </el-switch>
                    <span>{{ item.name }}</span>
                    <div>
                        <i
                            class="el-icon-edit"
                            style="margin-right:6px"
                            @click="handleOpenRuleModal(item.id)"
                        ></i>
                    </div>
                </div>
                <ul class="rule-card-content">
                    <h4>满足指标任意{{ item.minCondition }}条</h4>
                    <li v-if="item.sellAmountSwitch === 'ON'">
                        <span>销售金额: </span>
                        <span>{{ item.sellAmount }}</span>
                    </li>
                    <li v-if="item.orderCountSwitch === 'ON'">
                        <span>订单笔数: </span>
                        <span>{{ item.orderCount }}</span>
                    </li>
                    <li v-if="item.newCustomerCountSwitch === 'ON'">
                        <span>下单新用户: </span>
                        <span>{{ item.newCustomerCount }}</span>
                    </li>
                    <li v-if="item.refundOrderSwitch === 'ON'">
                        <span>退货低于: </span>
                        <span>{{ item.refundOrderCount }}</span>
                    </li>
                    <div style="margin-top: 36px; text-align: right">
                        分佣增加<span style="color:red">{{ item.bonus }}%</span>
                    </div>
                </ul>
                <div style="border-top: 1px solid #dcdfe6; padding-top: 20px; color:#dcdfe6">
                    最后编辑时间：{{ item.updateTime }}
                </div>
            </el-card>
        </div>
        <el-dialog :visible.sync="ruleModalVisible" :title="ruleForm.id ? '编辑策略' : '新增策略'">
            <el-form :model="ruleForm" ref="ruleFormRef" inline>
                <el-row class="rule-form-row">
                    <span>
                        策略名称
                    </span>
                    <div>
                        <el-form-item prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </div>
                </el-row>
                <el-row class="rule-form-row">
                    <span>
                        展示图标
                    </span>
                    <div>
                        <el-form-item prop="iconType">
                            <el-radio-group v-model="ruleForm.iconType">
                                <el-radio label="GOLD">金牌</el-radio>
                                <el-radio label="SILVER">银牌</el-radio>
                                <el-radio label="BRONZE">铜牌</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-row>
                <el-row class="rule-form-row">
                    <span>
                        要求指标
                    </span>
                    <div>
                        <el-row>
                            <el-form-item prop="sellAmountSwitch" style="width: 100px">
                                <el-checkbox v-model="computeSellAmount">销售金额</el-checkbox>
                            </el-form-item>
                            <el-form-item prop="sellAmount">
                                <el-input v-model="ruleForm.sellAmount">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item prop="orderCountSwitch" style="width: 100px">
                                <el-checkbox v-model="computeOrderCount">订单笔数</el-checkbox>
                            </el-form-item>
                            <el-form-item prop="orderCount">
                                <el-input v-model="ruleForm.orderCount">
                                    <template slot="append">笔</template>
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item prop="newCustomerSwitch" style="width: 100px">
                                <el-checkbox v-model="computeNewCustomer">下单新用户</el-checkbox>
                            </el-form-item>
                            <el-form-item prop="newCustomerCount">
                                <el-input v-model="ruleForm.newCustomerCount">
                                    <template slot="append">人</template>
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item prop="refundOrderSwitch" style="width: 100px">
                                <el-checkbox v-model="computeRefundOrder">退货订单数</el-checkbox>
                            </el-form-item>
                            <el-form-item prop="refundOrderCount">
                                <el-input v-model="ruleForm.refundOrderCount">
                                    <template slot="append">笔</template>
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex" align="middle" justify="around">
                            <span>满足指标任意</span>
                            <el-form-item
                                prop="minCondition"
                                style="margin:0;"
                                class="condition-form-item"
                            >
                                <el-input
                                    size="mini"
                                    style="width:120px"
                                    v-model="ruleForm.minCondition"
                                >
                                    <template slot="append">条</template>
                                </el-input>
                            </el-form-item>
                            <span>即可</span>
                        </el-row>
                    </div>
                </el-row>
                <el-row class="rule-form-row">
                    <span>
                        奖励标准
                    </span>
                    <div class="row-bonus-block">
                        <span>额外增加</span>
                        <el-form-item prop="bonus" style="margin:0">
                            <el-input size="mini" style="width:80px" v-model="ruleForm.bonus">
                            </el-input>
                        </el-form-item>
                        <span>%提成比例</span>
                    </div>
                </el-row>
            </el-form>
            <span slot="footer">
                <el-button @click="handleSaveRuleForm" type="primary">保存</el-button>
                <el-button @click="ruleModalVisible = false" type="default">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    getStrategyQueryList,
    createStrategy,
    getStrategyDetail,
    editStrategy,
    toggleStrategy
} from '@/api/captain';
import PopConfirm from '@/components/PopConfirm/popConfirm';

export default {
    data() {
        return {
            ruleModalVisible: false,
            ruleForm: {
                id: null,
                name: '',
                iconType: null,
                minCondition: 1,
                sellAmount: null,
                sellAmountSwitch: 'OFF',
                refundOrderCount: null,
                refundOrderSwitch: 'OFF',
                orderCount: null,
                orderCountSwitch: 'OFF',
                newCustomerCount: null,
                newCustomerSwitch: 'OFF',
                bonus: null
            },
            list: [],
            listLoading: false,
            needSettle: false
        };
    },
    created() {
        this.getList();
    },
    computed: {
        computeSellAmount: {
            get() {
                return this.ruleForm.sellAmountSwitch === 'ON' ? true : false;
            },
            set(newVal) {
                if (newVal) {
                    this.ruleForm.sellAmountSwitch = 'ON';
                } else {
                    this.ruleForm.sellAmountSwitch = 'OFF';
                }
            }
        },
        computeOrderCount: {
            get() {
                return this.ruleForm.orderCountSwitch === 'ON' ? true : false;
            },
            set(newVal) {
                if (newVal) {
                    this.ruleForm.orderCountSwitch = 'ON';
                } else {
                    this.ruleForm.orderCountSwitch = 'OFF';
                }
            }
        },
        computeNewCustomer: {
            get() {
                return this.ruleForm.newCustomerSwitch === 'ON' ? true : false;
            },
            set(newVal) {
                if (newVal) {
                    this.ruleForm.newCustomerSwitch = 'ON';
                } else {
                    this.ruleForm.newCustomerSwitch = 'OFF';
                }
            }
        },
        computeRefundOrder: {
            get() {
                return this.ruleForm.refundOrderSwitch === 'ON' ? true : false;
            },
            set(newVal) {
                if (newVal) {
                    this.ruleForm.refundOrderSwitch = 'ON';
                } else {
                    this.ruleForm.refundOrderSwitch = 'OFF';
                }
            }
        }
    },
    methods: {
        getList() {
            this.listLoading = true;
            getStrategyQueryList().then(res => {
                this.listLoading = false;
                if (res.data.success === true) {
                    this.needSettle = res.data.data.needSettle;
                    this.list = res.data.data.strategyList;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleToggleRule(flag, id) {
            toggleStrategy({ id, status: flag ? 'ON' : 'OFF' }).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: flag ? '打开策略成功！' : '关闭策略成功',
                        type: 'sucess',
                        duration: 1000
                    });
                    this.getList();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleOpenRuleModal(id) {
            if (id) {
                this.ruleForm.id = id;
                getStrategyDetail(id).then(res => {
                    this.ruleForm = {
                        ...this.ruleForm,
                        ...res.data.data
                    };
                });
            }
            this.ruleModalVisible = true;
        },
        handleSaveRuleForm() {
            if (this.ruleForm.id !== null) {
                editStrategy(this.ruleForm).then(res => {
                    if (res.data.success === true) {
                        this.$message({
                            message: '修改策略成功！',
                            type: 'sucess',
                            duration: 1000
                        });
                        this.$refs.ruleFormRef.resetFields();
                        this.ruleModalVisible = false;
                        this.getList();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 3000
                        });
                    }
                });
            } else {
                createStrategy(this.ruleForm).then(res => {
                    if (res.data.success === true) {
                        this.$message({
                            message: '新增策略成功！',
                            type: 'sucess',
                            duration: 1000
                        });
                        this.$refs.ruleFormRef.resetFields();
                        this.ruleModalVisible = false;
                        this.getList();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 3000
                        });
                    }
                });
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$col: 3;

.app-container {
    .rule-title {
        font-size: 20px;
        color: #000000;
        font-weight: bold;
    }
    .rule-danger {
        color: red;
        vertical-align: baseline;
    }
    .rule-info {
        display: block;
        color: #e3e2e5;
        margin-top: 8px;
    }
    .rule-cards {
        .rule-card {
            position: relative;
            display: inline-block;
            // calc 内部的表达式，在使用运算符号时，两遍必须加上空格（虽然乘除可以无视，但还是建议带上）！，不然会解析错误！！
            width: calc(calc(100% - 76px) / 3);
            margin-right: 24px;
            margin-bottom: 24px;
            &:nth-child(n + 3) {
                margin-right: 0;
            }
            .rule-card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                /deep/ .el-icon-edit {
                    cursor: pointer;
                    color: #409eff;
                }
                /deep/ .el-icon-delete {
                    cursor: pointer;
                    color: #f56c6c;
                }
            }
            h4 {
                margin-top: 0;
            }
            ul.rule-card-content {
                list-style: none;
                margin: 0;
                margin-bottom: 30px;
                li {
                    margin-bottom: 12px;
                }
            }
        }
    }
    .rule-form-row {
        & > span {
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            color: #000000;
            font-weight: bold;
        }

        & > div {
            display: inline-block;
            padding-top: 20px;
            &.row-bonus-block {
                display: inline-flex;
                align-items: center;
                span {
                    display: inline-block;
                }
            }
        }
        .condition-form-item {
            /deep/ .el-input-group {
                vertical-align: middle;
            }
        }
    }
}
</style>
